@extends('home/master')
@section('title','堆糖，美好生活研究所')
@section('style')
    <link href="{{url('css/index.5445dff6.css')}}" rel="stylesheet"/>
    <script src="{{url('js/lib.bundle.a6ecd17d.js')}}"></script>
    <link rel="stylesheet" href="{{url('css/player.css')}}">
    <script src="{{url('js/jquery.mins.js')}}"></script>
    <script src="{{url('js/jquery.marquee.min.js')}}"></script>
@endsection
@section('content')
    <script src="{{asset('mix/chinaz.js')}}"></script>
    <link rel="stylesheet" href="{{asset('mix/demo.css')}}">
    <link rel="stylesheet" href="{{asset('mix/jquery.flipster.css')}}">
    <link rel="stylesheet" href="{{asset('mix/flipsternavtabs.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('mix/lanrenzhijia.css')}}">
    <script type="text/javascript" src="{{asset('mix/jquery-v1.7.1.js')}}"></script>
    <script type="text/javascript" src="{{asset('mix/jquery-hover-effect.js')}}"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery(function () {
                jQuery('ul.da-thumbs > li').hoverdir();
            });
        });
    </script>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            /*height: 3000px;*/
        }

        #span {
            position: absolute;
            z-index: 2;
            left: 0px;
            top: 0px;
        }

        #div1 {
            height: 600px;
            width: 800px;
            margin-top: 50px;
            position: relative;

        }

        #img {
            height: 600px;
            width: 700px;
            border-radius: 20px;
            background-color: #f5f5f5;
            /*	transform: perspective(500px) rotateX(0deg) rotateY(0deg);
                -webkit-transform:perspective(500px) rotateX(0deg) rotateY(0deg);*/
            transition: -webkit-transform 0.2s, box-shadow .1s;
            box-shadow: 0px 0px 15px -5px #a0a0a0;

        }

        #img2 {
            position: absolute;
            bottom: 40px;
            right: 40px;
            transform: perspective(500px) rotateX(0deg) rotateY(0deg);
            -webkit-transform: perspective(500px) rotateX(0deg) rotateY(0deg);
            transition: -webkit-transform 0.2s;
        }
        .ts1 {
            float: left;
            margin-left: 15px;
        }

        .ts2 {
            float: right;
            margin-right: 15px;
        }
        p{
            margin:0;
        }
    </style>
    <link rel='stylesheet' href="{{asset('mix/page/lanrenzhijia.css')}}" media='screen' />
    <script src="{{asset('mix/blocksit.min.js')}}"></script>
    <script>
        $(document).ready(function() {
            //vendor script
            $('#header')
                .css({ 'top':-50 })
                .delay(1000)
                .animate({'top': 0}, 800);

            $('#footer')
                .css({ 'bottom':-15 })
                .delay(1000)
                .animate({'bottom': 0}, 800);

            //blocksit define
            $(window).load( function() {
                $('#container').BlocksIt({
                    numOfCol: 5,
                    offsetX: 8,
                    offsetY: 8
                });
            });

            //window resize
            var currentWidth = 1100;
            $(window).resize(function() {
                var winWidth = $(window).width();
                var conWidth;
                if(winWidth < 660) {
                    conWidth = 440;
                    col = 2
                } else if(winWidth < 880) {
                    conWidth = 660;
                    col = 3
                } else if(winWidth < 1100) {
                    conWidth = 880;
                    col = 4;
                } else {
                    conWidth = 1100;
                    col = 5;
                }

                if(conWidth != currentWidth) {
                    currentWidth = conWidth;
                    $('#container').width(conWidth);
                    $('#container').BlocksIt({
                        numOfCol: col,
                        offsetX: 8,
                        offsetY: 8
                    });
                }
            });
        });
    </script>

    <script src="{{asset('mix/hm.js')}}"></script>
    {{--<div id="dt-header-btm"></div>--}}
    {{--</div></div>--}}
    <div id="content">
        <div class="dt-wrap">
            <div class="dt-wrap">
                <div class="flipster">
                    <ul id="div1">
                        @foreach($album as $a)
                            <li id="span">
                                <img src="{{$a->path}}" id="img" alt="">
                            </li>
                        @endforeach
                    </ul>
                </div>
                {{--<script src="{{asset('mix/index.af3a1a89.js')}}"></script>--}}
                <script src="{{asset('mix/jquery.flipster.js')}}"></script>
                <script src="{{asset('js/waterfall.js')}}"></script>
                <script>
                    $(function () {
                        $(".flipster").flipster({
                            style: 'carousel',
                            start: 0
                        });
                    });
                </script>
                <script type="text/javascript">
                    var img = document.getElementsByTagName('img');
                    var d1 = document.getElementById('div1');
                    var li = document.getElementsByTagName('li');
                    for (var i = 0; i < li.length; i++) {
                        (function (i) {
                            li[i].onmousemove = function (event) {
                                var dx = event.clientX - d1.offsetLeft - (d1.offsetWidth / 2);
                                var dy = event.clientY - d1.offsetTop - (d1.offsetHeight / 2);
                                // console.log(dx);
                                // console.log(-dy);
                                img[i].style.transform = 'perspective(500px) rotateX(' + -(dy / 30) + 'deg) rotateY(' + (dx / 100) + 'deg)';
                                img[i].style.boxShadow = "" + -(dx / 50) + "px " + -(dy / 15) + "px 15px -5px #a0a0a0";

                            }
                        })(i);

                        (function (i) {
                            li[i].onmouseout = function () {
                                img[i].style.transform = 'rotateX(0deg) rotateY(0deg)';
                                img[i].style.boxShadow = "0px 0px 15px -5px #a0a0a0";
                                // i2.style.transform = 'rotateX(0deg) rotateY(0deg)';
                            }
                        })(i);
                    }
                </script>
            </div>
            <div id="dt-center" class="clr">
                <div class="dt-block">
                    <h2>专辑精选</h2>
                    <div class="dt-album oh">
                        @foreach($special as $s)
                            {{--{{dump($s->pic)}}--}}
                            <div class="section" data-id="83086767">
                                <div class="section-img">
                                    <img src="{{asset('public/').'/'.$s->pic}}">
                                    {{--<a target="_blank" class="dt-img-cover" href=""></a>--}}
                                </div>
                                <div class="section-desc">
                                    <a target="_blank" class="section-title" href="" style="line-height:15px;">
                                        {{$s->desc}}
                                    </a>
                                    <div class="section-attr">
                                        <p>
                                            2张图片 <b>·</b> 10人收藏
                                        </p>
                                        <p>
                                            by <a target="_blank" class="dt-username" href="">{{$s->username}}</a>
                                        </p>
                                    </div>
                                    <div class="section-bottom-a"></div>
                                    <div class="section-bottom-b"></div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="dt-block">
                    <div class="pg-tmentry r pg-gray-link">
                        <span>良品购：</span><a href="{{url('home/liangfashion?cid=')}}" target="_blank">全部</a>
                    </div>
                    <h2>单品推荐<a href="/badge/category/user/?tag=全部" target="_blank" class="dt-sblnk" ></a></h2>
                    <div class="dt-woo-list oh">
                        <div class="dt-woo-list-inner">
                            @foreach($lianggoods as $goods)
                                <div class="dt-woo dt-woo-0" >
                                    <a target="_blank" class="dt-woo-img">
                                        <img src="{{asset('adminliang').'/'.$goods->pic}}">
                                    </a>
                                    <a target="_blank" class="dt-img-cover" href="{{url('home/liangdetail?id=').$goods->id}}"></a>
                                    <div class="dt-woo-desc">
                                        <p class="dt-woo-title">
                                            <a target="_blank" href="https://www.duitang.com/shopping/?cat=1&amp;sub=%E8%89%AF%E5%93%81%E8%B4%AD_%E8%96%84%E5%A4%96%E5%A5%97">{{$goods->name}}</a>
                                        </p>
                                        <p class="dt-woo-attr">
                                            单价:{{$goods->price}}
                                        </p>
                                        <a target="_blank" href="{{url('home/liangfashion?cid=')}}" class="dt-woo-cat">
                                            良品购
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="dt-block dt-daren">
                        <h2>达人推荐<a href="/badge/category/user/?tag=全部" target="_blank" class="dt-sblnk" ></a></h2>
                        <div class="image_grid portfolio_4col" style="width:1400px">
                            <ul id="list" class="portfolio_list da-thumbs">
                                @foreach($search as $a)
                                    <li>
                                        <img src="{{asset('/public').'/'.$a->head}}" alt=""
                                             style="width:224px;height:224px">
                                        <article class="da-animate da-slideFromRight" style="display: block;color:red;">
                                            {{--<div style="display: block;color:red;">--}}
                                            <h3 style="display: block;color: #cccccc;">达人</h3>
                                            {{--</div>--}}
                                            <h3 style="display: block;color:#cccccc;">{{$a->username}}</h3>
                                        </article>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
            </div>
            <div class="dt-block">
                <h2>大家正在逛</h2>
            </div>
            <div id="fordymarea">
                <a name="woo-anchor" class="woo-swa"></a>
                <div id="dt-center" class="clr" style="margin-left:-50px;margin:0 auto">
                    <section id="wrapper" style="position:relative;margin-left:30px">
                        <div id="container">
                            @foreach($single as $s)
                                <div class="grid">
                                    <div class="imgholder"><a href="{{url('home/dandetail?id=').$s->id}}"><img src="{{asset('adminpublic').'/'.$s->pic}}" style="width:224px"/></a></div>
                                    <div class="ts1">{{$s->describe}}</div>

                                </div>
                            @endforeach
                        </div>
                    </section>
                    <div class="woo-pager">
                    </div>
                    <script>
                        $('#fordymarea').attr('id', 'woo-holder').find('div.woo-pcont').addClass('woo-masned')
                    </script>
                </div>
            </div>
            <div id="dt-woomore">
                <a class="dt-pg-btn" href="">回顶部 ></a>
            </div>
        </div>
                <link rel="stylesheet" href="{{asset('mix/chinaz.css')}}">
                <div id="chinaz" style="position:fixed;right:-50px;bottom: 0px;z-index:2;">
                    <div class="banner-btn">
                        <a href="javascript:;" class="prevBtn" rel="nofollow"><i></i></a>
                        <a href="javascript:;" class="nextBtn" rel="nofollow"><i></i></a>
                    </div>
                    <ul class="banner-img">
                        @foreach($adver as $a)
                            <li>
                                <img src="{{$a->path}}" alt="暴力大狩猎《世界2》安卓网络版发布">
                                <a href=""><p>{{$a->describe}}</p></a><span></span>
                            </li>
                        @endforeach
                    </ul>
                    <ul class="banner-circle">
                        @foreach($adver as $s)
                            <li class="selected">
                                <a href="javascript:;" rel="nofollow">
                                    <img src="{{$a->path}}"></a>
                            </li>
                        @endforeach
                    </ul>
                    <div class="banner-load"></div>
                </div>
                <script>
                    $('#PresonnelRightDivBody').scroll(function () {
                        document.getElementById("chinaz").style.marginLeft = (0 - document.getElementById('PresonnelRightDivBody').scrollLeft) + "px";
                    });
                </script>
                {{--音乐播放器  --}}
                <div id="QPlayer">
                    <div id="pContent">
                        <div id="player">
                            <span class="cover"></span>
                            <div class="ctrl">
                                <div class="musicTag marquee">
                                    <strong>Title</strong>
                                    <span> - </span>
                                    <span class="artist">Artist</span>
                                </div>
                                <div class="progress">
                                    <div class="timer left">0:00</div>
                                    <div class="contr">
                                        <div class="rewind icon"></div>
                                        <div class="playback icon"></div>
                                        <div class="fastforward icon"></div>
                                    </div>
                                    <div class="right">
                                        <div class="liebiao icon"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ssBtn">
                            <div class="adf"></div>
                        </div>
                    </div>
                    <ol id="playlist"></ol>
                </div>
                <script>

                    var	playlist ={!! $music !!};
                    var isRotate = true;
                    var autoplay = false;
                </script>
                <script src="{{url('js/player.js')}}"></script>
                <script>

                    function bgChange(){
                        var lis= $('.lib');
                        for(var i=0; i<lis.length; i+=2)
                            lis[i].style.background = 'rgba(246, 246, 246, 0.5)';
                    }
                    window.onload = bgChange;
                </script>
    {{--<script src="{{asset('mix/jquery-1.8.3.min.js')}}"></script>--}}

@endsection